$(function () {
    let q = {
        pagenum: 1, //是 int 页码值
        pagesize: 2, //是 int 每页显示多少条数据
        cate_id: '', //否 string 文章分类的 Id
        state: '', //否 string 文章的状态， 可选值有： 已发布、 草稿
    }
    //渲染页面数据
    initArticleList()

    function initArticleList() {
        axios({
            url: '/my/article/list',
            method: 'get',
            params: q
        }).then(res => {
            //成功回调
            if (res.data.status != 0) return layer.msg(res.data.message)
            //渲染
            let htmlArr = []

            res.data.data.forEach(value => {
                htmlArr.push(`<tr>
                <td>${value.Id}</td>
                <td>${value.cate_name}</td>
                <td>${dateFormat(value.pub_date)}</td>
                <td>${value.state}</td>
                <td>
                    <button type="button" class="layui-btn layui-btn-xs">修改</button>
                        <button type="button" class="layui-btn layui-btn-xs layui-btn-danger">删除</button>
                </td>
              </tr>`)
            })
            $('tbody').empty().html(htmlArr.join(''))
            renderPage(res.data.total)
        })


    }

    // 初始话文章分类
    let form = layui.form
    initArtCateList()

    function initArtCateList() {
        axios({
            url: '/my/article/cates',
            method: 'get',

        }).then(res => {
            //成功回调
            let dataArr = res.data.data
            let htmlArr = ['<option value="" >请选择文章类别</option>']
            dataArr.forEach(value => {
                htmlArr.push(`<option value="${value.Id}" >${value.name}</option>`)
            })
            $('[name="cate_id"]').empty().html(htmlArr.join(''))
            //渲染全部动态新增的form表单
            form.render()
        })
    }


    $('#form').on('submit', function (e) {
        e.preventDefault()
        q.cate_id = $('[name="cate_id"]').val()
        q.state = $('[name="state"]').val()
        initArticleList()
    })
    //分页功能
    function renderPage(total) {
        var laypage = layui.laypage;

        //执行一个laypage实例
        laypage.render({
            elem: 'test1', //注意，这里的 test1 是 ID，不用加 # 号
            count: total, //数据的总数 //数据总数，从服务端得到
            limit: q.pagesize,
            layout:['count', 'limit', 'prev','page','next'],
            limits:[2,5,10,15,20],
            curr:q.pagenum, //第几页
            //执行代码
            jump: function (obj, first) {
                //obj包含了当前分页的所有参数，比如：
                // console.log(obj); //得到当前页，以便向服务端请求对应页的数据。
                // console.log(first); //得到每页显示的条数
                //首次不执行
                if (!first) {//页面开始时会自动执行，我们只需要在页码切换后执行
                    //do something
                    q.pagenum = obj.curr//修改当前的页码
                    q.pagesize = obj.limit//修改当前的数据条数
                    initArticleList()
                }
            }
        })
    }


})